<html>
<head>
  <title>Securitybot front-end</title>
  <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.12/cr-1.3.2/datatables.min.css" integrity="sha384-7BhmgMfe0hg2B8/5HygrgPwzcKFOcCX6s6cbV8hNZr9W7iaAuGKSskghV4QNz123" crossorigin="anonymous"/>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/cr-1.3.2/datatables.min.js" integrity="sha384-fW78f6p4qkcbaOLucxJ/0dYH6CZq1S2qQWIvapIkVrpc1IaOQFspvS0IVtXiTyeF" crossorigin="anonymous"></script>
  <!-- Custom -->
  <link href="static/css/main.css" rel="stylesheet" type="text/css">
  <link href="static/favicon.ico" rel="shortcut icon">
  <script type="text/javascript" src="/static/js/main.js"></script>
</head>

<body>
  <!-- I'm bad at font-end stuff, please forgive me :( -->
  <div class="container">
    <div class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Securitybot</a>
        </div>

        <div id="navbar">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#alerts" data-toggle="tab">Alerts</a>
            </li>

            <li>
              <a href="#ignored" data-toggle="tab">Ignored</a>
            </li>

            <li>
              <a href="#blacklist" data-toggle="tab">Blacklist</a>
            </li>

            <li>
              <a href="#create" data-toggle="tab">Create</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="alert alert-info" id="globalAlert" role="alert"></div>

    <div class="tab-content clearfix">
      <!-- DB Querying -->
      <div class="tab-pane active" id="alerts">
        <h3 class="heading">Alerts in the Securitybot database</h3>

        <form onsubmit="return submitAlerts(this);" class="form-horizontal">
          <!-- Limit -->
          <div class="form-group">
            <label for="alertsLimit" class="col-md-2 control-label">Limit</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="alertsLimit" placeholder="Limit (default: 50)">
            </div>
          </div>
          <!-- Titles -->
          <div class="form-group">
            <label for="alertsTitles" class="col-md-2 control-label">Titles</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="alertsTitles" placeholder="Titles">
            </div>
          </div>
          <!-- Ldap -->
          <div class="form-group">
            <label for="alertsLdap" class="col-md-2 control-label">Usernames</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="alertsLdap" placeholder="Usernames">
            </div>
          </div>
          <!-- Status radios -->
          <div class="form-group">
            <label for="alertsStatus" class="col-md-2 control-label">Status</label>
            <div class="col-md-10">
              <label class="radio-inline">
                <input type="radio" name="alertsStatus" id="alertsStatusAny" value="any" checked>
                Any
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsStatus" id="alertsStatusNew" value="0">
                New
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsStatus" id="alertsStatusInProgress" value="1">
                In progress
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsStatus" id="alertsStatusComplete" value="2">
                Complete
              </label>
            </div>
          </div>
          <!-- Performed radios -->
          <div class="form-group">
            <label for="alertsPerformed" class="col-md-2 control-label">Performed</label>
            <div class="col-md-10">
              <label class="radio-inline">
                <input type="radio" name="alertsPerformed" id="alertsPerformedAny" value="any" checked>
                Any
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsPerformed" id="alertsPerformedYes" value="1">
                Yes
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsPerformed" id="alertsPerformedNo" value="0">
                No
              </label>
            </div>
          </div>
          <!-- Authenticated radios -->
          <div class="form-group">
            <label for="alertsAuthenticated" class="col-md-2 control-label">Authenticated</label>
            <div class="col-md-10">
              <label class="radio-inline">
                <input type="radio" name="alertsAuthenticated" id="alertsAuthenticatedAny" value="any" checked>
                Any
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsAuthenticated" id="alertsAuthenticatedYes" value="1">
                Yes
              </label>
              <label class="radio-inline">
                <input type="radio" name="alertsAuthenticated" id="alertsAuthenticatedNo" value="0">
                No
              </label>
            </div>
          </div>
          <!-- After -->
          <div class="form-group">
            <label for="alertsAfter" class="col-md-2 control-label">Earliest alert date</label>
            <div class="col-md-10">
              <input type="datetime-local" id="alertsAfter">
            </div>
          </div>
          <!-- Before -->
          <div class="form-group">
            <label for="alertsBefore" class="col-md-2 control-label">Latest alert date</label>
            <div class="col-md-10">
              <input type="datetime-local" id="alertsBefore">
            </div>
          </div>
          <!-- Submit button -->
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">Search</button>
              <i class="fa fa-spinner fa-pulse fa-lg loading-icon" id="alertsLoading"></i>
            </div>
          </div>
        </form>

        <!-- Visible columns -->
        <form class="form-horizontal">
          <div class="form-group">
            <label for="visibleColumns" class="col-md-2 control-label">Visible columns</label>
            <div class="col-md-10">
              <label class="checkbox-inline">
                <input type="checkbox" name="title" parent="alerts" class="toggle-vis" checked>
                Title
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="username" parent="alerts" class="toggle-vis" checked>
                Username
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="description" parent="alerts" class="toggle-vis" checked>
                Description
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="reason" parent="alerts" class="toggle-vis" checked>
                Reason
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="performed" parent="alerts" class="toggle-vis" checked>
                Performed
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="authenticated" parent="alerts" class="toggle-vis" checked>
                Authenticated
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="url" parent="alerts" class="toggle-vis" checked>
                URL
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="status" parent="alerts" class="toggle-vis" checked>
                Status
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="event_time" parent="alerts" class="toggle-vis" checked>
                Event time
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="hash" parent="alerts" class="toggle-vis">
                Hash
              </label>
            </div>
          </div>
        </form>

        <table id="alertsTable" class="table table-hover"></table>
      </div>

      <div class="tab-pane" id="ignored">
        <h3 class="heading">Ignored alerts</h3>

        <form onsubmit="return submitIgnored(this);" class="form-horizontal">
          <!-- Limit -->
          <div class="form-group">
            <label for="ignoredLimit" class="col-md-2 control-label">Limit</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="ignoredLimit" placeholder="Limit (default: 50)">
            </div>
          </div>
          <!-- Ldap -->
          <div class="form-group">
            <label for="ignoredLdap" class="col-md-2 control-label">Usernames</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="ignoredLdap" placeholder="Usernames">
            </div>
          </div>
          <!-- Submit button -->
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">Search</button>
              <i class="fa fa-spinner fa-pulse fa-lg loading-icon" id="ignoredLoading"></i>
            </div>
          </div>
        </form>

        <!-- Visible columns -->
        <form class="form-horizontal">
          <div class="form-group">
            <label for="visibleColumns" class="col-md-2 control-label">Visible columns</label>
            <div class="col-md-10">
              <label class="checkbox-inline">
                <input type="checkbox" name="title" parent="ignored" class="toggle-vis" checked>
                Title
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="username" parent="ignored" class="toggle-vis" checked>
                Username
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="until" parent="ignored" class="toggle-vis" checked>
                Ignored until
              </label>

              <label class="checkbox-inline">
                <input type="checkbox" name="reason" parent="ignore" class="toggle-vis" checked>
                Reason
              </label>
            </div>
          </div>
        </form>

        <table id="ignoredTable" class="table table-hover"></table>
      </div>

      <div class="tab-pane" id="blacklist">
        <h3 class="heading">Blacklisted users</h3>

        <form onsubmit="return submitBlacklist(this);" class="form-horizontal">
          <!-- Limit -->
          <div class="form-group">
            <label for="blacklistLimit" class="col-md-2 control-label">Limit</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="blacklistLimit" placeholder="Limit (default: 50)">
            </div>
          </div>
          <!-- Submit button -->
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">Search</button>
              <i class="fa fa-spinner fa-pulse fa-lg loading-icon" id="blacklistLoading"></i>
            </div>
          </div>
        </form>

        <!-- Visible columns -->
        <form class="form-horizontal">
          <div class="form-group">
            <label for="visibleColumns" class="col-md-2 control-label">Visible columns</label>
            <div class="col-md-10">
              <label class="checkbox-inline">
                <input type="checkbox" name="username" parent="blacklist" class="toggle-vis" onclick="didYouReallyToggleThat(this);" checked>
                Username
              </label>
            </div>
          </div>
        </form>

        <table id="blacklistTable" class="table table-hover"></table>
      </div>

      <div class="tab-pane" id="create">
        <h3 class="heading">Send custom alert</h3>

        <form onsubmit="return submitCustom(this);" class="form-horizontal">
          <!-- Title -->
          <div class="form-group">
            <label for="customTitle" class="col-md-2 control-label">Title</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="customTitle" placeholder="Title">
            </div>
          </div>
          <!-- Ldap -->
          <div class="form-group">
            <label for="customLdap" class="col-md-2 control-label">Username</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="customLdap" placeholder="Username">
            </div>
          </div>
          <!-- Description -->
          <div class="form-group">
            <label for="customDescription" class="col-md-2 control-label">Description</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="customDescription" placeholder="Description">
            </div>
          </div>
          <!-- Reason -->
          <div class="form-group">
            <label for="customReason" class="col-md-2 control-label">Reason</label>
            <div class="col-md-10">
              <input type="text" class="form-control" id="customReason" placeholder="Reason">
            </div>
          </div>
          <!-- Submit button -->
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">Create</button>
              <i class="fa fa-spinner fa-pulse fa-lg loading-icon" id="customLoading"></i>
            </div>
          </div>
        </form>
    </div>
  </div>
</body>
</html>
